<!DOCTYPE html	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="/assets/css/menubase.css" rel="stylesheet" type="text/css" />
	<script>
	/* $(document).ready(function() {
		var theme = 'dark-hive';
	     PrimeFaces.changeTheme(theme);
	}); */
	</script>
	<style type="text/css">
.fa {
	font-size: 14px;
	font-family: FontAwesome;
	font-weight: lighter;
	font-style: normal;
}

.ui-tree .ui-treenode-icon {
	display: inline-block;
	vertical-align: bottom;
}
</style>
</h:head>
<body>

	<h:form id="form">
		<p:growl id="message" showDetail="true" />
		<h:panelGrid columns="3" cellpadding="10">

			<p:outputLabel for="advanced" value="选择皮肤:" />
			<p:themeSwitcher id="advanced" value="#{webAppPreferences.theme}"
				style="width:165px" effect="fade" var="t">
				<f:selectItem itemLabel="Choose Theme" itemValue="" />
				<f:selectItems value="#{themeService.themes}" var="theme"
					itemLabel="#{theme.displayName}" itemValue="#{theme}" />

				<p:column>
					<h:outputText styleClass="ui-theme ui-theme-#{t.name}"
						style="display-block" />
				</p:column>

				<p:column>
                        #{t.displayName}
                    </p:column>
			</p:themeSwitcher>
			<p:commandButton value="保存"
				actionListener="#{webAppPreferences.saveTheme}"></p:commandButton>
		</h:panelGrid>

		<p:separator />

		<p:dialog header="Dialog" widgetVar="dlg" minHeight="40" modal="true">
			<h:outputText value="Resistance to PrimeFaces is futile!" />
		</p:dialog>

		<p:commandButton value="Dialog" onclick="PF('dlg').show()"
			type="button" style="display:block;" />

		<p:panel header="Panel" style="margin:20px 0px">
                Panel Content
            </p:panel>

		<p:spinner />

		<p:toolbar style="margin:20px 0px">
			<f:facet name="left">
				<p:commandButton type="button" value="New" icon="ui-icon-document" />
				<p:commandButton type="button" value="Open"
					icon="ui-icon-folder-open" />
				<p:commandButton type="button" title="Save" icon="ui-icon-disk" />
				<p:commandButton type="button" title="Delete" icon="ui-icon-trash" />
				<p:commandButton type="button" title="Print" icon="ui-icon-print" />
			</f:facet>

			<f:facet name="right">
				<p:menuButton value="Navigate">
					<p:menuitem value="Home" url="http://www.primefaces.org" />
					<p:menuitem value="ShowCase"
						url="http://www.primefaces.org/showcase" />
					<p:menuitem value="TouchFaces"
						url="http://www.primefaces.org/showcase/touch" />
				</p:menuButton>
			</f:facet>
		</p:toolbar>

		<p:accordionPanel>
			<p:tab title="Tab1">Tab1 Content</p:tab>
			<p:tab title="Tab2">Tab2 Content</p:tab>
			<p:tab title="Tab3">Tab3 Content</p:tab>
		</p:accordionPanel>

	</h:form>

</body>
</html>